import { FormSchema } from '/@/components/Form';
import { useI18n } from '/@/hooks/web/useI18n';
import { ref } from 'vue';
import { useCurrencyStore } from '/@/store/modules/currency';

const { t } = useI18n();

const checkList = ['中文', '英文', '越南文', '葡萄牙语', '泰语', '印度语'];

const langs = [
  { label: '中文', value: 'zh_CN' },
  { label: '英语', value: 'en_US' },
  { label: '葡萄牙语', value: 'pt_BR' },
  { label: '泰语', value: 'th_TH' },
  { label: '越南语', value: 'vi_VN' },
  { label: '印地语', value: 'hi_IN' },
];

const isShow = ref(false);

const labelWidth = 140;
const labelWidth120 = 120;

// 基础配置
export const schemas: FormSchema[] = [
  {
    field: 'commission_withdraw_min',
    component: 'Input',
    label: t('modalForm.system.system_minimum_deposit') + ':',
    colProps: { span: 6 },
    labelWidth: labelWidth120,
    componentProps: {},
    slot: 'mini',
    rules: [
      {
        required: true,
        type: 'string',
        validator: async (rule, value) => {
          if (!value) {
            return Promise.resolve();
          }
          return Promise.resolve();
        },
        trigger: 'blur',
      },
    ],
  },
  {
    field: 'lotteryBetting',
    component: 'Input',
    label: t('table.system.withdraw_count') + ':',
    colProps: { span: 6 },
    labelWidth,
    componentProps: {},
    slot: 'withdraw-times',
    rules: [
      {
        required: true,
        type: 'string',
        validator: async (rule, value) => {
          if (!value) {
            return Promise.resolve();
          }
          return Promise.resolve();
        },
        trigger: 'blur',
      },
    ],
  },
  {
    field: 'lotteryBetting',
    component: 'Input',
    label: t('table.system.system_limit_settings_bet') + ':',
    colProps: { span: 6 },
    labelWidth,
    componentProps: {},
    slot: 'base-three',
    rules: [
      {
        required: true,
        type: 'string',
        validator: async (rule, value) => {
          if (!value) {
            return Promise.resolve();
          }
          return Promise.resolve();
        },
        trigger: 'blur',
      },
    ],
  },

  {
    field: 'PreferentialConfiguration',
    component: 'Input',
    label: t('table.system.system_deposit_preferential_conf') + ':',
    colProps: { span: 6 },
    labelWidth,
    rules: [
      {
        required: true,
        type: 'string',
        validator: async (rule, value) => {
          if (!value) {
            return Promise.resolve();
          }
          return Promise.resolve();
        },
        trigger: 'blur',
      },
    ],
    componentProps: {},
    slot: 'PreferentialConfiguration',
  },
  {
    field: 'deposit',
    component: 'Select',
    label: t('modalForm.system.depositCording') + ':', //存款打码
    colProps: { span: 6 },
    labelWidth: labelWidth120,
    helpMessage: '-',
    helpComponentProps: {
      text: `<div><span style='color:#FFCB00;'>${t('table.system.system_select_yes')}</span>${t(
        'table.system.system_select_yes_info',
      )}</div>
      <div><span style='color:#FFCB00;'>${t('table.system.system_select_no')}</span>${t(
        'table.system.system_select_no_info',
      )}</div>
                `,
      placement: 'topRight',
      isBefore: true,
    },
    componentProps: () => {
      return {
        options: [
          { label: t('business.common_yes'), value: true },
          { label: t('business.common_no'), value: false },
        ],
        style: { width: '121px' },
      };
    },
    required: false,
  },

  {
    field: 'currency_exchange',
    component: 'Select',
    label: t('table.system.currency_exchange') + ':',
    defaultValue: 1,
    helpMessage: '-',
    helpComponentProps: {
      // <p>${t('table.system.tips')}</p>
      text: `
      <p> <span style='color:#FACD91;'>${t('table.system.text1')}</span>  ${t(
        'table.system.text2',
      )}</p>
       <span style='color:#FACD91;'>${t('table.system.text3')}</span>${t(
        'table.system.text4',
      )} <br/>
       <span style='color:#FACD91;'>${t('table.system.text5')}</span>${t(
        'table.system.text6',
      )} <br/>
       <span style='color:#FACD91;'>${t('table.system.text7')}</span>${t('table.system.text8')}
                `,
      placement: 'top',
      isBefore: true,
    },
    labelWidth,
    colProps: { span: 6 },
    componentProps: {
      allowClear: false,
      options: [
        { label: t('table.system.set1'), value: 1 }, //
        { label: t('table.system.set2'), value: 2 }, //
        { label: t('table.system.set3'), value: 3 }, //
        { label: t('table.system.set0'), value: 0 }, //关闭
      ],
      onChange: (e) => {
        // console.log(e);
        // if (e == '2') {
        //   isShow.value = false;
        // }
        // if (e == '1') {
        //   isShow.value = true;
        // }
      },
    },
    // componentProps: {
    //   options: securityOptions.map((itme) => {
    //     return {
    //       label: t(itme.label),
    //       value: itme.value,
    //     };
    //   }),
    // },
    required: false,
  },

  {
    field: 'coin_deposit',
    component: 'Select',
    label: t('table.system.coin_deposit') + ':',
    defaultValue: 0,
    helpMessage: '-',
    helpComponentProps: {
      text: `
       <span style='color:#FACD91;'>${t('table.system.text9')}</span>  ${t(
        'table.system.text10',
      )}<br/>
       <span style='color:#FACD91;'>${t('table.system.text11')}</span>${t(
        'table.system.text12',
      )} <br/>
                `,
      placement: 'top',
      isBefore: true,
    },
    labelWidth,
    colProps: { span: 6 },
    componentProps: {
      allowClear: false,
      options: [
        { label: t('table.system.close'), value: 0 }, //
        { label: t('table.system.currency_change'), value: 1 }, //
      ],
      onChange: (e) => {},
    },
    required: false,
  },
  {
    field: 'coin_deposit_currency',
    component: 'ApiSelect',
    label: t('table.system.coin_deposit_currency') + ':',
    labelWidth,
    colProps: { span: 6 },
    // componentProps: {
    //   allowClear: false,
    //   options: [
    //     { label: t('table.system.close'), value: 0 }, //
    //     { label: t('table.system.currency_change'), value: 1 }, //
    //   ],
    //   onChange: (e) => {},
    // },
    componentProps: {
      api: async () => {
        const { getCurrencyList } = useCurrencyStore();
        const list = getCurrencyList.filter((el) => el.attr == 1);
        return list;
      },
      labelField: 'label',
      valueField: 'value',
      showIcon: true,
      getPopupContainer: () => document.body,
    },
    required: false,
    ifShow: ({ values }) => {
      return values.coin_deposit != 0;
    },
  },
  // {
  //   field: 'exchange',
  //   component: 'RadioGroup',
  //   label: t('table.system.system_Currency_convertibility1') + ':',
  //   defaultValue: 1,
  //   helpMessage: '-',
  //   helpComponentProps: {
  //     text: `<div><span style='color:#FFCB00;'>${t('common.On')}: </span>${t(
  //       'table.system.system_select_on_info',
  //     )}</div>
  //     <div><span style='color:#FFCB00;'>${t('common.Off')}: </span>${t(
  //       'table.system.system_select_off_info',
  //     )}</div>
  //               `,
  //     placement: 'top',
  //     isBefore: true,
  //   },
  //   labelWidth: '155px',
  //   colProps: { span: 6 },
  //   componentProps: {
  //     options: [
  //       { label: t('business.common_on'), value: true }, //开启
  //       { label: t('business.common_off'), value: false }, //关闭
  //     ],
  //   },
  //   // componentProps: {
  //   //   options: securityOptions.map((itme) => {
  //   //     return {
  //   //       label: t(itme.label),
  //   //       value: itme.value,
  //   //     };
  //   //   }),
  //   // },
  //   required: false,
  // },
  {
    field: 'verify',
    component: 'RadioGroup',
    // labelWidth: 110,
    label: t('table.system.system_Security_verification') + ':',
    defaultValue: 1,
    labelWidth: labelWidth120,
    colProps: { span: 8 },
    componentProps: {
      options: [
        { label: t('modalForm.system.system_google_code_qr'), value: 1 }, //谷歌二维码
        { label: t('modalForm.member.member_fund'), value: 2 },
        {
          label: t('common.All'),
          value: 3,
        },
      ],
    },
    required: false,
  },
  {
    field: 'fast',
    component: 'RadioGroup',
    label: t('table.system.system_Security_fast') + ':',
    defaultValue: 1,
    labelWidth,
    helpMessage: '-',
    helpComponentProps: {
      text: `<div><span style='color:#FFCB00;'>${t(
        'table.system.system_select_not_mandatory',
      )}</span>${t('table.system.system_select_not_mandatory_info')}</div>
      <div><span style='color:#FFCB00;'>${t('table.system.system_select_mandatory')}</span>${t(
        'table.system.system_select_mandatory_info',
      )}</div>
                `,
      placement: 'topRight',
      isBefore: true,
    },
    colProps: {
      span: 8,
      class: 'fast-sty',
    },
    componentProps: {
      options: [
        { label: t('modalForm.system.system_Security_fast_1'), value: 0 }, //谷歌二维码
        { label: t('modalForm.member.system_Security_fast_2'), value: 1 },
      ],
    },
    required: false,
  },
  {
    field: 'basic-info',
    component: 'Input',
    label: '',
    colProps: {
      span: 8,
    },
    slot: 'basicInfo',
  },
  {
    field: 'chooseLanguage',
    component: 'Select',
    label: t('table.system.system_website_language') + ':',
    defaultValue: 1,
    helpMessage: '-',
    helpComponentProps: {
      text: `<div>${t('table.system.system_default_all_languages')}</div>
                `,
      placement: 'top',
      isBefore: true,
    },
    labelWidth: labelWidth120,
    colProps: { span: 6 },
    componentProps: {
      allowClear: false,
      options: [
        { label: t('table.system.system_language1'), value: 1 }, //开启
        { label: t('table.system.system_languages'), value: 2 }, //关闭
      ],
      onChange: (e) => {
        if (e == '2') {
          isShow.value = false;
        }
        if (e == '1') {
          isShow.value = true;
        }
      },
    },
    // componentProps: {
    //   options: securityOptions.map((itme) => {
    //     return {
    //       label: t(itme.label),
    //       value: itme.value,
    //     };
    //   }),
    // },
    required: false,
  },
  {
    field: 'lang',
    component: 'RadioGroup',
    label: t('table.system.system_default_language') + ':',
    labelWidth,
    defaultValue: 'zh_CN',

    componentProps: () => {
      return {
        options: langs,
      };
    },
    ifShow: () => isShow.value,
  },
  {
    field: 'currncy',
    component: 'Input',
    label: t('table.system.system_operating_currency') + ':',
    labelWidth: labelWidth120,
    helpMessage: '-',
    helpComponentProps: {
      text: `<div>${t('table.system.system_help')}</div>`,
      placement: 'topLeft',
      isBefore: true,
    },
    colProps: { span: 24 },
    slot: 'currency-slot',
  },
];
// useAutoLabelWidth(schemas, { moreWidth: 20 });
